<template>
    <div class="ask-city-panel-box" ref="panelRef" v-loading="loader">
        <ul class="ask-city-panel__list">
            <template v-for="item in list">
                <li
                    class="ask-city-panel__item"
                    :class="[
                        currentValue === item.code ? 'active' : '',
                        item.class || ''
                    ]"
                    @click="handleClick(item)"
                    :key="item.code"
                >
                    <span>{{ item.name }}</span>
                </li>
            </template>
        </ul>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component,
    Prop,
    Inject,
    Watch,
    Ref
} from "vue-property-decorator";

import { scrollTopSmooth } from "@/utils";

@Component({
    name: "CityCascaderPanel",
    model: {
        prop: "value",
        event: "change"
    }
})
export default class CityCascaderPanel extends Vue {
    @Ref() readonly panelRef!: any;

    @Inject("main") readonly main!: any;

    // 当前选中值
    @Prop({
        type: String,
        default: ""
    })
    readonly value!: string;

    // 当前列表渲染数据
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any[];

    // 当前模块名称
    @Prop({
        type: String,
        default: ""
    })
    readonly name!: string;

    // 当前列表是否禁用
    @Prop({
        type: Boolean,
        default: false
    })
    readonly disabled!: boolean;

    // 当前列表是否在展示
    @Prop({
        type: Boolean,
        default: false
    })
    readonly show!: boolean;

    // 当前列表是正在加载中
    @Prop({
        type: Boolean,
        default: false
    })
    readonly loader!: boolean;

    @Prop({
        type: Function,
        default: () => true
    })
    readonly beforeClick!: any;

    @Watch("value", { immediate: true })
    onValueChange() {
        this.currentValue = this.value;
    }

    @Watch("show", { immediate: true })
    onShowChange() {
        if (this.show) {
            this.calcPosition();
        }
    }

    currentValue = "";

    /**
     * 滚动到指定位置
     */
    scrollTopSmooth(val = 0, needTransition = true) {
        this.panelRef &&
            scrollTopSmooth(val, this.panelRef, needTransition);
    }

    /**
     * 处理每一项的点击
     */
    handleClick(item: any) {
        if (this.disabled || item.name === "暂无数据") {
            return;
        }
        const before = this.beforeClick(item, this.name);
        if (before && before.then) {
            before.then(
                () => {
                    this.setActiveNode(item);
                },
                (error: any) => {
                    console.log(error);
                }
            );
        } else {
            before && this.setActiveNode(item);
        }
    }

    /**
     * 设置activenode
     */
    setActiveNode(item: any) {
        // this.currentValue = item.code;
        this.$emit("item-active", item);
    }

    /**
     * 初始化数据并滚动到指定位置
     */
    calcPosition() {
        if (!this.currentValue || this.list.length === 0) {
            this.scrollTopSmooth(0);
            return;
        }
        const _index = this.list.findIndex(
            cur => cur.code === this.currentValue
        );
        if (_index === -1) {
            this.scrollTopSmooth(0);
        } else {
            this.$nextTick(() => {
                const el = this.panelRef.querySelectorAll(
                    ".ask-city-panel__item"
                )[_index];
                this.scrollTopSmooth(el.offsetTop, false);
            });
        }
    }

    /**
     * 重置数据
     */
    resetState() {
        this.currentValue = "";
    }
}
</script>
